<template>
  <van-pull-refresh v-model="loading" @refresh="onRefresh"></van-pull-refresh>
  <!-- :title="user.nickname" -->
  <van-nav-bar class="nav-bar"  left-text="返回" left-arrow @click-left="onClickLeft" />

  <div class="middle">
    <div style="width: 100%">
      <van-search v-model="value" shape="round" placeholder="请输入搜索关键词" background="#ffd101"
                  @search="onSearch">
        <template #action>123
          <div @click="onClickButton">搜索</div>
        </template>
      </van-search>
    </div>
    <div class="middle-zhong">
      <van-grid :border="false" :column-num="5">
        <van-grid-item v-for="itme in middle_tu" :key="itme">
          <router-link to="/homepage">
            <van-image :src="itme.url" />
          </router-link>
        </van-grid-item>
      </van-grid>
    </div>
    <div>
      <van-button>天天神券</van-button>
      <van-button>减配送费</van-button>
      <van-button>高分评价</van-button>
      <van-button>优惠折扣</van-button>
    </div>
  </div>
  <div style="position: relative">
    <van-card @click="toShopDishesDetails(item.id)" v-for="(item) in shopArray" :key="item" price="2.00"
              :desc="item.salesVolume" :title="item.shopName" thumb-mode='aspectFill' :thumb="item.headPortrait">
      <template #tags>
        <van-tag plain type="danger">标签</van-tag>
        <van-tag plain type="danger">标签</van-tag>
      </template>
    </van-card>
  </div>
</template>
<script>
import {
  ref
} from 'vue';
import {
  Toast
} from 'vant';

export default {
  name: "WaiMaiIndex",
  data() {
    return {
      shopArray: [],
      currentPage: 1,
      pageSize: 5,
      total: 0,
      chu: false,
      middle_tu: [
        // {
        // 	url: require("../assets/wm.png")
        // },
        {
          url: require("../assets/ms.png")
        },
        {
          url: require("../assets/jd.png")
        },
        {
          url: require("../assets/xx.png")
        },
        {
          url: require("../assets/dy.png")
        },
        {
          url: require("../assets/sc.png")
        },
        {
          url: require("../assets/xh.png")
        },
        {
          url: require("../assets/cs.png")
        },
        {
          url: require("../assets/my.png")
        },
        {
          url: require("../assets/cw.png")
        },
        {
          url: require("../assets/yx.png")
        },
        {
          url: require("../assets/sg.png")
        },
        {
          url: require("../assets/xj.png")
        },
        {
          url: require("../assets/lf.png")
        },
        {
          url: require("../assets/pt.png")
        },
      ],
      tu: [{
        character: "扫一扫",
        url: require("../assets/RichScan.png")
      },
        {
          character: "骑车",
          url: require("../assets/cycle.png")
        },
        {
          character: "打车",
          url: require("../assets/taxi.png")
        },
        {
          character: "火车票机票",
          url: require("../assets/ticket.png")
        },
      ],
      store: [{
        name: '长沙大计',
        jiehsao: '5.0分|月售9999+',
        label1: '12减12',
        label2: '新人减1',
        label3: '0折起',
        url: require("../assets/pikaqiu.png")
      },
        {
          name: '北大青鸟',
          jiehsao: '5.0分|月售9999+',
          label1: '12减12',
          label2: '新人减1',
          label3: '0折起',
          url: require("../assets/xiaomei.png")
        },
        {
          name: '北大青鸟',
          jiehsao: '5.0分|月售9999+',
          label1: '12减12',
          label2: '新人减1',
          label3: '0折起',
          url: require("../assets/xiaomei.png")
        },
        {
          name: '长沙大计',
          jiehsao: '5.0分|月售9999+',
          label1: '12减12',
          label2: '新人减1',
          label3: '0折起',
          url: require("../assets/pikaqiu.png")
        },
        {
          name: '长沙大计',
          jiehsao: '5.0分|月售9999+',
          label1: '12减12',
          label2: '新人减1',
          label3: '0折起',
          url: require("../assets/pikaqiu.png")
        },
        {
          name: '长沙大计',
          jiehsao: '5.0分|月售9999+',
          label1: '12减12',
          label2: '新人减1',
          label3: '0折起',
          url: require("../assets/pikaqiu.png")
        },
        {
          name: '长沙大计',
          jiehsao: '5.0分|月售9999+',
          label1: '12减12',
          label2: '新人减1',
          label3: '0折起',
          url: require("../assets/pikaqiu.png")
        },

      ],
      checked: true,
    }
  },
  setup() {
    const showPopover = ref(false);

    // 通过 actions 属性来定义菜单选项
    const actions = [{
      text: '选项一'
    },
      {
        text: '选项二'
      },
      {
        text: '选项三'
      },
    ];
    const onSelect = (action) => Toast(action.text);

    return {
      actions,
      onSelect,
      showPopover,
    };
  },
  mounted() { //挂载之后执行的方法
    this.getShopInfoList();
  },
  methods: {
    onSearch(){
      console.log("搜索");
    },
    toShopDishesDetails(shopId) {
      console.log("shopId=" + shopId);
      this.$router.push({
        path: '/shopDishesList',
        query: {
          shopId: shopId
        }
      })
    },
    getShopInfoList() {
      this.$axios.get('/shop/likeShop', {
        params: {
          // pageNum: this.currentPage
        }
      })
          .then(res => {
            // console.log("data=" + res)
            this.shopArray = res.result.shop.records;
            console.log("res.data.current=" + res.data.current);
            console.log("this.shopArrayp[0].shopName=" + this.shopArrayp[0].shopName);
            this.currentPage = res.data.current;
            this.total = res.data.total;
          }).catch(error => {
        console.log("error:" + error)
      })
    },
    xianshi() {

      if (this.chu === false) {
        this.chu = true;
      } else {
        this.chu = false;
      }
    },onClickLeft() {
      history.back()
    },
  },
}
</script>
